<template>
    <div>
        <el-container class="home-container">
            <el-header height>
                <!-- Header content -->
                <div class="logo">
                    <img src="../assets/logo.png" alt />
                    <span>后台电商管理系统</span>
                </div>

                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{username}}您好
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>全屏</el-dropdown-item>
                        <el-dropdown-item @click.native="quit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside :width="iscollapse?'63px':'200px'">
                    <div class="toggle">
                        <i
                            @click="iscollapse=!iscollapse"
                            v-if="!iscollapse"
                            class="el-icon-s-fold"
                        ></i>
                        <i @click="iscollapse=!iscollapse" v-else class="el-icon-s-unfold"></i>
                    </div>
                    <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                        :collapse="iscollapse"
                        :collapse-transition="false"
                        :default-active="$route.path"
                        :unique-opened="true"
                    >
                        <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                            <template slot="title">
                                <i :class="iconsObj[item.id]"></i>
                                <span slot="title">{{item.authName}}</span>
                            </template>
                            <el-menu-item
                                :index="'/'+val.path+''"
                                v-for="val in item.children"
                                :key="val.path"
                            >{{val.authName}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main height>
                    <!-- Main content -->

                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menuList: [],
            iconsObj: {
                125: "el-icon-s-custom",
                103: "el-icon-info",
                101: "el-icon-s-shop",
                102: "el-icon-s-order",
                145: "el-icon-s-data",
            },
            iscollapse: false,
        };
    },
    computed: {
        username() {
            return JSON.parse(sessionStorage.getItem("userinfo")).username;
        },
    },
    created() {
        this.getMenuList();
    },
    methods: {
        quit() {
            this.$confirm("您确定要退出吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$message({
                    type: "success",
                    message: "退出成功!",
                });
                sessionStorage.removeItem("userinfo");
                this.$router.push("/login");
            });
        },
        async getMenuList() {
            let { data: res } = await this.$axios.get("menus");
            if (res.meta.status !== 200)
                return this.$message.error(res.meta.msg);
            this.menuList = res.data;
        },
    },
};
</script>
<style lang="less">
.home-container {
    height: 100vh;
}
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 20px;
        img {
            height: 50px;
            margin-right: 20px;
        }
    }
}
.el-aside {
    .el-menu {
        border-right: 0 solid;
    }
    background-color: #333744;
    .toggle {
        color: #fff;
        text-align: center;
    }
}
.el-main {
    background-color: #eaedf1;
}
</style>
